<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slot-插槽的基本使用</title>
</head>
<body>
    <div id="app">
        <cpn>
            <button>按钮</button>
        </cpn>
        <cpn>
            <span>span</span>
        </cpn>
        <cpn>
            <a href="">链接</a>
        </cpn>
        <cpn></cpn>
    </div>


    <template id="cpn">
        <div>
            <h2>组件</h2>
            <h3>欢迎使用组件cpn</h3>
            <slot>
                <h4>插槽默认值</h4>
            </slot>
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        const cpn = {
            template: '#cpn',

        }

        const app = new Vue({
            el: '#app',
            data: {

            },
            methods: {

            },
            components: {
                cpn
            }
        })
    </script>
</body>
</html>